<template>
  <div class="debug-container">
    <h2>批次查询前端调试工具</h2>
    
    <!-- API测试 -->
    <el-card class="debug-card">
      <template #header>
        <span>API调用测试</span>
      </template>
      
      <el-button @click="testApiCall" :loading="testing" type="primary">
        测试API调用
      </el-button>
      
      <div v-if="apiResult" class="result-section">
        <h4>API调用结果：</h4>
        <pre>{{ JSON.stringify(apiResult, null, 2) }}</pre>
      </div>
    </el-card>

    <!-- 数据结构分析 -->
    <el-card class="debug-card">
      <template #header>
        <span>数据结构分析</span>
      </template>
      
      <div v-if="apiResult" class="analysis-section">
        <h4>数据结构分析：</h4>
        <p><strong>响应类型：</strong> {{ typeof apiResult }}</p>
        <p><strong>是否为数组：</strong> {{ Array.isArray(apiResult) }}</p>
        <p><strong>对象键：</strong> {{ Object.keys(apiResult || {}) }}</p>
        
        <div v-if="apiResult && typeof apiResult === 'object'">
          <h5>对象属性：</h5>
          <ul>
            <li v-for="(value, key) in apiResult" :key="key">
              <strong>{{ key }}:</strong> 
              <span v-if="Array.isArray(value)">数组 (长度: {{ value.length }})</span>
              <span v-else-if="typeof value === 'object'">对象</span>
              <span v-else>{{ typeof value }} - {{ value }}</span>
            </li>
          </ul>
        </div>
      </div>
    </el-card>

    <!-- 表格数据模拟 -->
    <el-card class="debug-card">
      <template #header>
        <span>表格数据模拟</span>
      </template>
      
      <el-button @click="simulateTableData" type="success">
        模拟表格数据
      </el-button>
      
      <div v-if="simulatedData" class="result-section">
        <h4>模拟的表格数据：</h4>
        <el-table :data="simulatedData" border style="width: 100%">
          <el-table-column prop="serialNumber" label="序号" width="80" />
          <el-table-column prop="goodsCode" label="货品编号" width="120" />
          <el-table-column prop="goodsName" label="货品名称" width="150" />
          <el-table-column prop="goodsType" label="货品类型" width="120" />
          <el-table-column prop="unit" label="单位" width="80" />
          <el-table-column prop="warehouseName" label="仓库名称" width="120" />
          <el-table-column prop="currentStock" label="当前库存" width="100" />
          <el-table-column prop="batch" label="批次" width="100" />
        </el-table>
      </div>
    </el-card>

    <!-- 数据转换测试 -->
    <el-card class="debug-card">
      <template #header>
        <span>数据转换测试</span>
      </template>
      
      <el-button @click="testDataConversion" type="warning">
        测试数据转换
      </el-button>
      
      <div v-if="conversionResult" class="result-section">
        <h4>转换结果：</h4>
        <pre>{{ JSON.stringify(conversionResult, null, 2) }}</pre>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { getBatchPage } from '/@/api/batch/batch'

// 状态
const testing = ref(false)
const apiResult = ref<any>(null)
const simulatedData = ref<any[]>([])
const conversionResult = ref<any>(null)

// 测试API调用
const testApiCall = async () => {
  testing.value = true
  try {
    const response = await getBatchPage({
      page: 1,
      pageSize: 5
    })
    
    apiResult.value = response
    ElMessage.success('API调用成功')
  } catch (error) {
    apiResult.value = { error: error }
    ElMessage.error('API调用失败')
  } finally {
    testing.value = false
  }
}

// 模拟表格数据
const simulateTableData = () => {
  simulatedData.value = [
    {
      serialNumber: 1,
      goodsCode: 'TEST001',
      goodsName: '测试货品1',
      goodsType: '电子产品',
      unit: '个',
      warehouseName: '测试仓库',
      currentStock: 50,
      batch: '0005454'
    },
    {
      serialNumber: 2,
      goodsCode: 'TEST002',
      goodsName: '测试货品2',
      goodsType: '家电',
      unit: '台',
      warehouseName: '测试仓库',
      currentStock: 30,
      batch: '0005455'
    }
  ]
  ElMessage.success('模拟数据生成成功')
}

// 测试数据转换
const testDataConversion = () => {
  if (!apiResult.value) {
    ElMessage.warning('请先测试API调用')
    return
  }
  
  let result = null
  
  // 尝试不同的数据转换方式
  if (apiResult.value && apiResult.value.data) {
    result = {
      method: 'response.data',
      data: apiResult.value.data,
      items: apiResult.value.data.items,
      total: apiResult.value.data.total
    }
  } else if (apiResult.value && apiResult.value.items) {
    result = {
      method: 'response.items',
      data: apiResult.value,
      items: apiResult.value.items,
      total: apiResult.value.total
    }
  } else if (Array.isArray(apiResult.value)) {
    result = {
      method: 'direct array',
      data: apiResult.value,
      items: apiResult.value,
      total: apiResult.value.length
    }
  } else {
    result = {
      method: 'unknown',
      data: apiResult.value,
      items: null,
      total: 0
    }
  }
  
  conversionResult.value = result
  ElMessage.success('数据转换测试完成')
}
</script>

<style scoped>
.debug-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.debug-card {
  margin-bottom: 20px;
}

.result-section {
  margin-top: 20px;
  padding: 15px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.analysis-section {
  margin-top: 20px;
  padding: 15px;
  background-color: #e8f4fd;
  border-radius: 4px;
}

.result-section pre {
  background-color: #fff;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
  max-height: 400px;
  font-size: 12px;
}

h2 {
  color: #333;
  margin-bottom: 20px;
}

h4 {
  color: #666;
  margin: 10px 0;
}

h5 {
  color: #888;
  margin: 10px 0 5px 0;
}

ul {
  margin: 5px 0;
  padding-left: 20px;
}

li {
  margin: 3px 0;
}
</style>



